<template>
  <div>
    <!-- logo -->
    <router-link to="/search">
      <van-search
      v-model="value"
      shape="round"
      background="#4fc08d"
      placeholder="请输入搜索关键词"
      input-align='center'/>
    </router-link>
    <!-- nav -->
    <div class="nav">
      <van-tabs @click="onClick">
        <van-tab v-for="item in nav" :key="item._id" :title="item.name"  @click="getbutton()"></van-tab>
      </van-tabs>
    </div>
    
    <!-- main -->
    <van-loading size="24px" vertical v-show="mainnavlog">加载中...</van-loading>

    <main>
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        @load="onLoad"
        :immediate-check=false>
        <!-- 返回顶部 -->
        <div class="goback" @click="returngo" v-if="reback">
          <span>返回顶部</span>
          <svg  @click="goback" class="totiao-icon tt-icon" aria-hidden="true">
            <use xlink:href="#icon-fanhuidingbu"></use>
          </svg>
        </div>
        <router-link v-for="item in mainnav" :key="item._id" :to="{path:'/article',query:{'id':item._id,'text':item.title}}"  @click="getarticle(item._id,item.time)">
          <div class="main-div">
            <!-- <h2>{{item.title}}</h2> -->
            <h2 v-html="item.title"></h2>
            <ul class="main-ul">
              <li v-for="(item2,index) in item.imageSrc" :key="index">
                  <lazy-component>
                    <van-image :class="item.imageSrc.length===1?'one':'three'"
                    fit="cover" :src="item2" v-lazy="item2" />
                  </lazy-component>
              </li>
            </ul>
            <p><span>{{item.author}}</span> <span>{{item.comment||'暂无'}}评论</span> 
            <em>{{format(item.time, "yyyy-MM-dd HH:mm:ss")}}</em>
            </p>
          </div>
        </router-link>
      </van-list>
      </van-pull-refresh>
    </main>
  </div>
</template>

<script>
import { Search } from 'vant';
import { Tab, Tabs } from 'vant';
import { Loading } from 'vant';
// main
import { Grid, GridItem } from 'vant';
import { format } from 'date-fns';
import { Toast } from 'vant';
// 图片填充
import { Image as VanImage } from 'vant';
// 下拉刷新
import { List } from 'vant';
import { PullRefresh } from 'vant';
export default {
  name: 'WorkspaceJsonHomeView',
  components:{
    [Search.name]:Search,
    [Tab.name]:Tab,
    [Loading.name]:Loading,
    [Tabs.name]:Tabs,
    [Grid.name]:Grid,
    [GridItem.name]:GridItem,
    [Toast.name]:Toast,
    [List.name]:List,
    [PullRefresh.name]:PullRefresh,
    [VanImage.name]:VanImage,
  },
  data() {
    return {
      res:'',
      nav:'',
      value:'',
      mainnav:[],
      format,
      mainnavlog:true,
      // 下拉刷新
      list: [],
      loading: false,
      finished: false,
      num:10,
      id:'',
      reback:false,
      isLoading: false,
      error: false,
    };
  },

  mounted() {
    
  },
  created(){
    this.getnav()
  },
  mounted(){
    window.addEventListener('scroll',this.goback)
  },
  computed:{
    
  },
  methods: {
    // 获取返回按钮显示不
    goback(){
      document.querySelector('.goback')
      let yemian=document.documentElement.scrollTop
      // console.log(yemian);
      if(yemian>=700){
        this.reback=true
      }else{
        this.reback=false
      }
    },
    // 返回顶部
    returngo(){
      const time=setInterval(()=>{
        let num=document.documentElement.scrollTop
        document.documentElement.scrollTop-=num/6
        // console.log(document.documentElement.scrollTop);
        if(document.documentElement.scrollTop<=0){
          clearInterval(time)
        }
      },10)
    },
    // 获取分类
    getnav(){
      this.$http.post('/api/get_cate_list')
      .then(res=>{
      this.nav=res.data;
      console.log(this.nav);
      this.getbutton(this.nav[0]._id)
      })
    },
    // 文章列表
    getbutton(_id){
      this.id=_id
      this.num=10
      this.mainnav=[]
      this.mainnavlog=true
      this.$http.post('/api/get_article_list',{
        cate_id:_id,
        skip:'0',
        limit:'10'
      })
      .then(res=>{
        console.log(res);
        if(res.code==0){
          this.res=res
          if(res.data){
            // 压缩图片
            res.data=res.data.map(v=>{
              v.imageSrc=v.imageSrc.map(v=>{
                return v+'?imageView2/1/w/150/h/150'
              })
              return v
            })
            
          }
          this.mainnav=res.data
          console.log(this.mainnav);
          this.mainnavlog=false
        }
      }).catch(err=>{
        this.error = true;
      })
    },
    // 根据索引获取分类id
    onClick(index) {
      console.log(index);
      this.getbutton(this.nav[index]._id)
    },
    // 下拉获取数据
    onLoad() {
      this.$http.post('/api/get_article_list',{
      cate_id:this.id,
      skip:this.num,
      limit:'10',
      })
      .then(res=>{
        this.res=res
        if(res.code==0){
          console.log(res.data);
          // res.data.forEach(v => {
          //   this.mainnav.push(v)
          // });
          res.data=res.data.map(v=>{
            v.imageSrc=v.imageSrc.map(v=>{
              return v+'?imageView2/1/w/200/h/200'
            })
            return v
          })
          this.mainnav.push(...res.data)
          console.log(this.mainnav);
          this.num=this.mainnav.length
          this.loading = false;
          console.log(this.res.count);
          if (this.num >= this.res.count) {
            this.finished = true;
          }
        }
      }).catch(err=>{
        console.log(err);
      })
    },
    // 下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.getbutton(this.id)
        this.mainnavlog=false
        Toast('刷新成功');
        this.isLoading = false;
      }, 1000);

    },
    // 文章详情
    getarticle(i,time){
      console.log(i);
      this.time=time
    },
  },
};
</script>

<style lang="less">
*{
  padding: 0;
  margin: 0;
}
.van-search{
  display: flex;
  position: fixed;
  width: 100%;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 13px;
  z-index: 3;
  top: 0px;
}
.nav{
  margin-top: 14vw;
  border-bottom: 1px solid #ccc;
  display: flex;
  position: fixed;
  z-index: 3;
}
.goback{
    position: fixed;
    top: 160vw;
    height: 13vw;
    right: 4.8vw;
    width: 13vw;
    z-index: 3;
    color: #242424;
    background-color: #e4e4e4;
    border-radius: 12px;
    padding: 5px;
  span{
    font-size: 11px;
  }
  .totiao-icon{
    width: 100%;
    font-size: 39px;
  }
}
main{
  padding-bottom: 60px;
  .van-loading{
    margin-bottom: 60px;
  }
  padding: 0 10px;
  padding-top: 108px;
  .main-div{
    margin-bottom: 30px;
    h2{
      margin: 6px 0;
      font-weight: 500;
      overflow: hidden;
      // 文本不换行
      white-space: nowrap;
      // 未显示的显示省略号
      text-overflow: ellipsis;
    }
    p{
      height: 21px;
      span{
        // overflow: hidden;
        display: inline-block;
        width: 16vw;
        height: 21px;
        // 超出部分隐藏
        overflow: hidden;
        // 文本不换行
        white-space: nowrap;
        // 未显示的显示省略号
        text-overflow: ellipsis;
        font-size: 14px;
        color: #747474;
        line-height: 22px;
      }
      span:nth-child(1){
        width: 24vw;
      }
      em{
          float: right;
          padding-right: 2.6vw;
          font-size: 14px;
          line-height: 21px;
          color: #7b7b7b;
      }
    }
    .main-ul{
      .one{
        width: 100%;
        height: 100%;
        img{
          width: 95vw;
          height: 95vw;
        }
      }
      .three{
        width: 28vw;
        height: 28vw;
        margin-right: 6px;
      }
      display: flex;
      flex-wrap: wrap;
      margin: 5px 0;
      li{
        img{
          width: 100%;
        }
      }
    }
  }
}

</style>